<template>
  <div>
    <v-text-field color="primary" label="搜索单词"></v-text-field>
    <!-- <v-switch label="显示配图"></v-switch> -->
  </div>
  <div v-if="wordList != null" style="margin-bottom: 20px;">
    <div class="word-list">
      <v-list-item :active="index == curIndex" color="primary" @click="viewWordDetail(word, index)" :key="word.wordId"
        v-for="(word, index ) in wordList">
        <!-- <template v-slot:prepend>
        <v-img v-if="word.image != null" :width="40" aspect-ratio="1/1" cover :src="word.image"></v-img>
      </template> -->
        <span><strong> {{ word.word }} </strong></span>&nbsp;
        <span v-for="(pronunciation, index) in word.pronunciation" :key="index">
          <small> {{ pronunciation.region }} [{{ pronunciation.symbol }}] </small>
        </span>
        <br>
        <span v-if="explainMode == 'auto'">
          <span v-if="word.translatedMeanings != null && word.translatedMeanings.length > 0">
            {{ '' + word.translatedMeanings[0].type + '.' }}
            {{ word.translatedMeanings[0].meaning }}
          </span>
          <span v-else-if="word.originalMeanings != null&&word.originalMeanings.length>0">
            {{ word.originalMeanings[0].type ? word.originalMeanings[0].type + '.' : '' }}
            {{ word.originalMeanings[0].meaning[0].explain }}
          </span>
        </span>
        <v-divider></v-divider>
      </v-list-item>
    </div>
  </div>
  <div :class="['side-word-detail', sideWordDetailMode == 'open' ? 'side-word-detail-open' : '',
    sideWordDetailMode == 'close' ? 'side-word-detail-close' : '', 'elevation-4']">
    <v-btn class="ma-2" color="info" @click="sideWordDetailMode = 'close'; this.$refs.wordView.applyDestroyed()">
      <v-icon start icon="mdi-arrow-left" />
      返回列表
    </v-btn>
    <div style="margin-bottom: 60px;">
      <word-view :setPageListener="selectPage" :next-callback="nextListener" :show-candidate="true" ref="wordView" />
    </div>
  </div>
  <v-pagination active-color="primary" style="margin-bottom: 50px;margin-left:-10px;margin-right: -10px"
    prev-icon="mdi-menu-left" next-icon="mdi-menu-right" :length="total" @update:model-value="selectPage"
    :model-value="wordBo.pageNum" />
  <v-overlay :model-value="overlay" class="align-center justify-center">
    <v-progress-circular color="primary" indeterminate size="64"></v-progress-circular>
  </v-overlay>
</template>

<script>

import { getDefaultWord } from "@/api/word.js";
import WordView from "../WordView.vue";
export default {
  name: 'defaultWordListView',
  components: { WordView },
  data() {
    return {
      searchKey: '搜索',
      wordList: null,
      showingList: null,
      wordBo: {
        bookId: undefined,
        pageSize: 20,
        pageNum: 1
      },
      sideWordDetailMode: false,
      overlay: false,
      total: 0,
      curIndex: 0,
      explainMode: 'auto'
    }
  },
  created() {
    this.loadWordList()
  },
  methods: {
    loadWordList() {
      this.wordBo.bookId = this.$route.params.bookId
      this.overlay = true
      getDefaultWord(this.wordBo).then(resp => {
        this.wordList = resp.rows
        if (resp.total % this.wordBo.pageSize == 0)
          this.total = resp.total / this.wordBo.pageSize
        else this.total = parseInt(resp.total / this.wordBo.pageSize) + 1
        if (this.sideWordDetailMode == 'open') {
          this.viewWordDetail(this.wordList[this.curIndex], this.curIndex)
        }
      }).finally(() => this.overlay = false)
    },
    viewWordDetail(word, curIndex) {
      this.sideWordDetailMode = 'open'
      this.$refs.wordView.setWordDetail(word)
      this.$refs.wordView.setCandidate(this.wordList[curIndex - 1], this.wordList[curIndex + 1],
        this.wordBo.pageNum, this.wordBo.pageNum < this.total)
      this.curIndex = curIndex
    },
    selectPage(num) {
      this.curIndex = 0
      this.wordBo.pageNum = num
      this.loadWordList()
    },
    nextListener(direction) {
      if (direction == 'pre')
        this.viewWordDetail(this.wordList[this.curIndex - 1], this.curIndex - 1)
      if (direction == 'next')
        this.viewWordDetail(this.wordList[this.curIndex + 1], this.curIndex + 1)
    }
  }
}
</script>

<style scoped>
.side-word-detail {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  top: 64px;
  background-color: white;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@media screen and (min-width: 769px) {
  .side-word-detail {
    width: 50%;
    position: fixed;
    overflow-y: auto;
    z-index: 100;
  }

  .side-word-detail-open {
    animation-name: detailAnimationOpenHalf;
  }

  .side-word-detail-close {
    animation-name: detailAnimationCloseHalf;
  }
}

@media screen and (max-width: 768px) {
  .side-word-detail-open {
    animation-name: detailAnimationOpen768;
  }

  .side-word-detail-close {
    animation-name: detailAnimationClose768;
  }

  .side-word-detail {
    height: calc(100vh - 64px);
    position: fixed;
    overflow: auto;
    z-index: 1;
  }
}

@keyframes detailAnimationOpen768 {
  from {
    left: 100%;
  }

  to {
    left: 0;
  }
}

@keyframes detailAnimationClose768 {
  from {
    left: 0%;
  }

  to {
    left: 100%;
  }
}

@keyframes detailAnimationOpenHalf {
  from {
    left: 100%;
  }

  to {
    left: 50%;
  }
}

@keyframes detailAnimationCloseHalf {
  from {
    left: 50%;
  }

  to {
    left: 100%;
  }
}
</style>